<template>
    <view :data-theme="globPrimary">
        <u-navbar title="支付宝绑定"></u-navbar>
        <view class="alipay-wrapper">
            <u-cell-group :border="false">
                <u-cell-item
                    title="真实姓名"
                    :arrow="false"
                    :title-style="titleStyle"
                    hover-class="none"
                >
                    <u-input
                        v-model="name"
                        placeholder="请输入姓名"
                        input-align="right"
                        :clearable="false"
                    />
                </u-cell-item>

                <u-cell-item
                    title="账号"
                    :arrow="false"
                    :title-style="titleStyle"
                    hover-class="none"
                >
                    <u-input
                        v-model="account"
                        placeholder="请输入账号"
                        input-align="right"
                        :clearable="false"
                    />
                </u-cell-item>
                <u-cell-item
                    title="手机号"
                    :arrow="false"
                    :title-style="titleStyle"
                    hover-class="none"
                >
                    <view class="phone">{{ userInfo.phone | formatMask }}</view>
                </u-cell-item>
                <u-cell-item
                    title="验证码"
                    :arrow="false"
                    :title-style="titleStyle"
                    hover-class="none"
                    :border-bottom="false"
                >
                    <view class="verify">
                        <u-input
                            v-model="verify"
                            placeholder="请输入验证码"
                            :clearable="false"
                        />
                        <view
                            class="btn"
                            :class="{ disabled: verifyDisabled }"
                            @click="handleGetCode(userInfo.phone)"
                            >{{ codeTips }}</view
                        >
                    </view>
                </u-cell-item>
            </u-cell-group>
        </view>
        <view class="btn-wrapper">
            <edu-button
                type="primary"
                :disabled="btnDisabled"
                @click="handleAlipay"
                >{{ money | formatCurrency }}提现</edu-button
            >
        </view>
        <u-verification-code
            seconds="60"
            ref="uCode"
            @change="codeChange"
            @end="codeEnd"
            @start="codeStart"
        ></u-verification-code>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            titleStyle: {
                "font-size": "30rpx",
                color: "#303133",
            },
            name: "",
            account: "",
            verify: "",
            money: 0,
            codeTips: "",
            verifyDisabled: false,
        };
    },
    onLoad(options) {
        this.money = options.money;
    },
    computed: {
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
            globPrimaryColor: "designSetting/getGlobThemeColor",
            userInfo: "user/getUserInfo",
        }),
        btnDisabled() {
            return this.name == "" || this.account == "" || this.verify == ""
                ? true
                : false;
        },
    },
    methods: {
        // 支付宝提现
        handleAlipay() {
            // #ifdef MP-WEIXIN || APP-PLUS
            if (this.btnDisabled) return;
            // #endif
            this.showAlipayPopup = false;
            this.$edu.api
                .postUserIncomeEncashmentAlipay({
                    money: this.money,
                    alipay_user_name: this.name,
                    // alipay_account: this.userInfo.phone,
                    alipay_account: this.account,
                    verify_code: this.verify,
                })
                .then((res) => {
                    this.$refs.uToast.show({
                        title: res.msg,
                        back: true,
                    });
                })
                .catch((res) => {
                    this.$u.toast(res.msg);
                });
        },
        // 获取验证码
        handleGetCode(phone) {
            if (this.$refs.uCode.canGetCode) {
                this.$edu.api
                    .createVerify({ phone: phone, type: "alipay" })
                    .then((res) => {
                        const { msg } = res;
                        this.$u.toast(msg);
                        this.$refs.uCode.start();
                    })
                    .catch((res) => {
                        this.$u.toast(res.msg);
                    });
            }
        },
        // 倒计时
        codeChange(text) {
            this.codeTips = text;
        },
        // 倒计时开始
        codeStart() {
            this.verifyDisabled = true;
        },
        // 倒计时结束
        codeEnd() {
            this.verifyDisabled = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.alipay-wrapper {
    padding-left: 30rpx;
    background-color: #ffffff;
    .u-cell {
        padding-left: 0;
    }
    .phone {
        color: $edu-content-color;
    }
    .verify {
        display: flex;
        align-items: center;
        margin-left: 72rpx;
        /* #ifdef MP-WEIXIN */
        justify-content: space-between;
        /* #endif */
        .btn {
            font-size: 28rpx;
            font-weight: 400;
            @include text-color();
        }
        .disabled {
            @include text-color-disabled();
        }
    }
}
.btn-wrapper {
    margin-top: 56rpx;
    padding: 0 30rpx;
}
</style>
